<template>
  <div class="tmpl">
    <el-row class="todo-input" :gutter="20">
      <el-col :span="20">
        <el-input v-model="input" placeholder="请输入待办项" @keyup.enter.native="addTodo"></el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" icon="el-icon-circle-plus" @click="addTodo">添加</el-button>
      </el-col>
    </el-row>
    <h1>待办项列表</h1>
    <el-row class="todo-list" v-for="(item, index) in todoList" :key="index">
      <span>{{item}}</span>
      <div class="delete-item" @click="delTodo(item, index)">完成</div>
    </el-row>
    <h1>完成项列表</h1>
    <el-row class="todo-list" v-for="(item, index) in completeList" :key="'del-'+index">
      <span>{{item}}</span>
      <div class="complete-item"><i class="el-icon-circle-check"></i></div>
    </el-row>
    <el-row class="clear-btn">
      <el-button type="primary" icon="el-icon-delete" @click="clearTodo">清空</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'TodoTable',
  data () {
    return {
      todoList: ['吃饭', '写代码'],
      completeList: ['睡觉'],
      input: ''
    }
  },
  methods: {
    addTodo () {
      if (this.input === '') {
        this.$message({
          showClose: true,
          message: '待办项不得为空',
          type: 'error'
        })
      } else {
        this.todoList.push(this.input)
        this.input = ''
        this.$message({
          showClose: true,
          message: '添加成功',
          type: 'success'
        })
      }
    },
    delTodo (val, index) {
      this.completeList.push(val)
      this.todoList.splice(index, 1)
      const h = this.$createElement
      this.$notify({
        title: '待办项提示',
        message: h('i', { style: 'color: teal' }, val + ' 已完成')
      })
    },
    clearTodo () {
      this.todoList = []
      this.completeList = []
    }
  }
}
</script>

<style scoped>
.tmpl{
  margin-top: 30px;
  width: 80%;
}
h1 {
  font-weight: normal;
}
.todo-input{
  width: 100%;
}
.todo-list{
  width: 100%;
  max-width: 400px;
  height: 50px;
  background: #fff;
  border: 1px solid #eee;
  line-height: 50px;
  font-size: 20px;
  padding-left: 30px;
}
.delete-item{
  float: right;
  width: 60px;
  background: red;
  height: 100%;
  font-size: 16px;
  color: #fff;
  text-align: center;
  cursor: pointer;
}
.complete-item{
  float: right;
  width: 60px;
  height: 100%;
  font-size: 24px;
  text-align: center;
}
.clear-btn {
  margin-top: 30px;
}
</style>
